<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>前端开发-禅悦内容管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description"
        content="前端开发,分享前端知识,丰富前端技能。汇集国内专业的前端开发文档,为推动业内前端开发水平共同奋斗。DoraCMS,html,js,css,nodejs,前端开发,jquery,web前端, web前端开发, 前端开发工程师">
    <meta content="前端开发,chanyue-cms,Nodejs内容管理系统,禅悦cms,禅悦, 前端开发, web前端, vue,react,node,express,mysql 前端开发工具 "
        name="keywords" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="前端开发俱乐部" />
    <meta property="og:description"
        content="前端开发俱乐部,分享前端知识,丰富前端技能。汇集国内专业的前端开发文档,为推动业内前端开发水平共同奋斗。DoraCMS,html,js,css,nodejs,前端开发,jquery,web前端, web前端开发, 前端开发工程师" />
    <meta property="og:image" content="./img/logo.png"/>
    <meta property="og:url" content="https://www.chanyue.top"/>
    <meta name="author" content="chanyue-cms"/>
    <link rel="shortcut icon" href="./img/favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="./css/element-plus.css"/>
    <link rel="stylesheet" href="./css/saduo@1.0.9.css"/>
    <link rel="stylesheet" href="./css/main.css"/>
    <link rel="stylesheet" href="./css/slidercaptcha.min.css" />
</head>

<style>
    #captcha {
        height: 202px;
        margin: 0px !important;
    }
</style>

<body class="bg-f8f8f8 pos-r">
    <!-- 头部 -->
    <header class="row header-wrap justify-center pos-r">
        <div class="header row align-c justify-between pt-5 pb-5">
            <div class="row align-c">
                <h1 class="logo" title="禅悦内容管理系统chanyue-cms">
                    <span class="c-141414">前端小栈</span><span class="theme f-16 ml-5">• 禅悦</span>
                </h1>
                <nav class="nav">
                    <ul class="row">
                        <li class="nav-item"><a href="/"  title="首页">首页</a></li>
                        <li class="nav-item">
                            <a href="/"  title="首页">前端开发</a>
                            <ul class="sub-nav">
                                <li class="sub-nav-item"><a href="/" >vue</a></li>
                                <li class="sub-nav-item"><a href="/" >react</a></li>
                                <li class="sub-nav-item"><a href="/" >javascript</a></li>
                                <li class="sub-nav-item"><a href="/" >css</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="/"  title="首页">node开发</a>
                            <ul class="sub-nav">
                                <li class="sub-nav-item"><a href="/" >express</a></li>
                                <li class="sub-nav-item"><a href="/" >mysql</a></li>
                                <li class="sub-nav-item"><a href="/" >服务器</a></li>
                            </ul>
                        <li class="nav-item"><a href="/"  title="首页">SEO</a></li>
                        <li class="nav-item"><a href="/"  title="首页">前端库</a></li>
                        <li class="nav-item"><a href="/"  title="首页">禅悦cms</a></li>
                        <li class="nav-item"><a href="/"  title="首页">案例</a></li>
                        <li class="nav-item"><a href="/"  title="首页">关于</a></li>
                    </ul>
                </nav>
            </div>
            <div class="search">
                <div class="el-input  el-input--prefix ">
                    <div class="el-input__wrapper" role="button">
                        <span class="el-input__prefix">
                            <span class="el-input__prefix-inner">
                                <i class="el-icon el-input__icon">
                                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                                        <path fill="currentColor"
                                            d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z">
                                        </path>
                                    </svg>
                                </i>
                            </span>
                        </span>
                        <input class="el-input__inner" type="text" autocomplete="off" placeholder="搜索点什么">
                    </div>
                    <!-- <el-button class="ml-5">搜索</el-button> -->
                </div>
            </div>

            <div class="ico-open"></div>
        </div>
    </header>

    <!-- 头条文章 -->
    <main class="bg-f2f2f2 pt-10 pb-20 row">

        <div class="main center mt-10 row gap-20">


            <aside class="flex-1">
                <!-- tag标签 -->
                <section class="notices pos-s pd-20 mb-20 bg-fff" style="top:80px;z-index: 2;">
                    <h3 class="m-title border-dashed f-16 row justify-between">「ABOUT」关于我们</h3>
                    <ul class="mt-10">
                        <li class="f-16 pt-4 pb-4 row bold  pl-10"><a href="" title="">关于作者</a></li>
                        <li class="f-16 pt-4 pb-4 row bold pl-10"><a href="" title="">最新动态</a></li>
                    </ul>
                </section>
            </aside>

            <!-- 最新文章 -->
            <article class="article-index">
                <!-- <div class="bg-fff radius-6 pd-15 mb-1 f-14 c-999">
                    <i class="ico-20 ico-home pos-r t-3"></i>
                    <a class="" href="" >首页</a> /
                    <a class="c-666" href="" >nodejs开发</a> /
                    express专题
                </div> -->
                <div class="bg-fff radius-6 pd-25">
                    <header class="border-b pos-r mb-20">
                        <h2 class="f-26 c-252933  bold mt-10">「ONLINE」在线留言</h2>
                    </header>
                    <article class="article-cont f-17 lh-35" id="app">
                        <el-form ref="message" :model="message" label-width="84px">
                            <el-form-item label="留言标题" prop="title" :rules="[
                                {
                                  required: true,
                                  message: '请输入留言标题',
                                  trigger: 'blur',
                                },
                                {
                                  min: 2,
                                  max: 20,
                                  message: '长度在 2 到 20 个字符',
                                  trigger: 'blur',
                                },
                              ]">
                                <el-input v-model="message.title"></el-input>
                            </el-form-item>

                            <el-form-item label="联系微信" prop="wx" :rules="[
                            {
                              required: true,
                              message: '请输入微信',
                              trigger: 'blur',
                            },
                            {
                              min: 2,
                              max: 20,
                              message: '长度在 2 到 20 个字符',
                              trigger: 'blur',
                            },
                          ]">
                                <el-input v-model="message.wx"></el-input>
                            </el-form-item>

                            <el-form-item label="联系电话" prop="tel" :rules="[
                            { type: 'number', message: '手机号必须是数字' },
                          ]">
                                <el-input v-model.number="message.tel" type="number"></el-input>
                            </el-form-item>

                            <el-form-item label="问题描述" prop="description" :rules="[
                            {
                                required: true,
                                message: '不写问题，你玩呢？',
                                trigger: 'blur',
                              },
                                {
                                  min: 2,
                                  max: 255,
                                  message: '字数限制255',
                                  trigger: 'blur',
                                },
                              ]">
                                <el-input type="textarea" :rows="3" class="textarea"
                                    v-model="message.description"></el-input>
                            </el-form-item>


                            <el-form-item label="图片验证">

                                <div id="captcha" style="height:202px;margin:0!important"></div>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="submitSeo('message')">提交</el-button>
                            </el-form-item>
                        </el-form>

                        <el-backtop :right="100" :bottom="100" />
                    </article>
                </div>
            </article>
        </div>
    </main>

    <!-- footer -->
    <footer class="pd-20">
        <div class="footer main center pd-20">
            <div class="row justify-between">
                <div class="col-6">
                    <h4 class="f-15   pb-10">前端</h4>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">JavaScript</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">vue</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">react</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">css3</a></p>
                </div>

                <div class="col-6">
                    <h4 class="f-15  pb-10">nodejs</h4>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">express</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">koa</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">mysql</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">mongoDB</a></p>
                </div>
                <div class="col-6">
                    <h4 class="f-15 pb-10">chanyue-cms</h4>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">在线文档</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">视频教程</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">标签工具</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">模板</a></p>
                </div>
                <div class="col-6">
                    <h4 class="f-15 pb-10">关于</h4>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">关于我们</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">最新动态</a></p>
                    <p class="f-13 pt-3 pb-3"><a href="" class="c-595959">联系作者</a></p>
                </div>
            </div>
            <p class="mt-30 text-c f-14">©copyright 前端小栈•禅悦 </p>
            <p class="f-13 text-c c-bfbfbf">自豪的采用 chanyue-cms</span></p>
        </div>
    </footer>

    <div id="app">
        <el-drawer v-model="drawer" :show-close="false" :with-header="false" :before-close="handleClose">
            <div class="search mb-20">
                <div class="el-input  el-input--prefix ">
                    <div class="el-input__wrapper" role="button">
                        <span class="el-input__prefix">
                            <span class="el-input__prefix-inner">
                                <i class="el-icon el-input__icon">
                                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                                        <path fill="currentColor"
                                            d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z">
                                        </path>
                                    </svg>
                                </i>
                            </span>
                        </span>
                        <input class="el-input__inner" type="text" autocomplete="off" placeholder="搜索点什么">
                    </div>
                    <!-- <el-button class="ml-5">搜索</el-button> -->
                </div>
            </div>
            <ul class="f-16">
                <li><a class="pt-5 pb-5 block" href="/"  title="首页">首页</a></li>
                <li>
                    <a class="pt-5 pb-5 block" href="/"  title="首页">前端开发</a>
                    <ul class="pl-16">
                        <li><a class="pt-5 pb-5 block" href="/" >vue</a></li>
                        <li><a class="pt-5 pb-5 block" href="/" >react</a></li>
                        <li><a class="pt-5 pb-5 block" href="/" >javascript</a></li>
                        <li><a class="pt-5 pb-5 block" href="/" >css</a></li>
                    </ul>
                </li>
                <li>
                    <a class="pt-5 pb-5 block" href="/"  title="首页">node开发</a>
                    <ul class="pl-16">
                        <li><a class="pt-5 pb-5 block" href="/" >express</a></li>
                        <li><a class="pt-5 pb-5 block" href="/" >mysql</a></li>
                        <li><a class="pt-5 pb-5 block" href="/" >服务器</a></li>
                    </ul>
                <li><a class="pt-5 pb-5 block" href="/"  title="首页">SEO</a></li>
                <li><a class="pt-5 pb-5 block" href="/"  title="首页">前端库</a></li>
                <li><a class="pt-5 pb-5 block" href="/"  title="首页">禅悦cms</a></li>
                <li><a class="pt-5 pb-5 block" href="/"  title="首页">案例</a></li>
                <li><a class="pt-5 pb-5 block" href="/"  title="首页">关于</a></li>
            </ul>
        </el-drawer>
        <el-backtop :right="100" :bottom="100" />
    </div>


    <script src="./js/vue@3.js"></script>
    <script src="./js/element-plus.js"></script>
    <script src="./js/longbow.slidercaptcha.min.js"></script>
    <script>
        var app = Vue.createApp({
            data: function () {
                return {
                    drawer: false,
                    message: {
                        title: "",
                        wx: "",
                        tel: '',
                        description: "",
                    },
                }
            },

            mounted() {
                this.captcha()
                let _this = this;
                document.querySelector('.ico-open').addEventListener('click', () => {
                    _this.drawer = true
                })
            },
            methods: {
                handleClose() {
                    this.drawer = false
                },
                captcha() {
                    var captcha = sliderCaptcha({
                        id: 'captcha',
                        width: 230,
                        // height: 150,
                        // sliderL: 42,
                        // sliderR: 9,
                        offset: 5,//5像素偏差
                        loadingText: '正在加载中...',
                        failedText: '再试一次',
                        barText: '向右滑动填充拼图',
                        setSrc: function () {
                            return './img/01.jpg';
                        },

                        onSuccess: function () {  //成功事件
                            alert('成功')
                            // var handler = setTimeout(function () {
                            //     window.clearTimeout(handler);
                            //     captcha.reset();
                            // }, 500);
                            captcha.reset();
                        }, onFail: function () {

                        },
                        onRefresh: function () {

                        }
                    });
                },
                submitSeo(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert(1)
                        } else {
                            console.log("error submit!!");
                            return false;
                        }
                    });
                },
            }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>

</body>

</html>